<template>
  <div>
    <ul class="ul">
      <!--人员类型-->
      <li class="li" :class="{'icon-user':user, 'icon-user-act':!user}">
        <div @click="navigationA" :class="{edgeA}">
          <span>人员类型</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isC, 'el-icon-arrow-down': !isC}"></i>
        </div>
        <ul v-show="navigation1" class="deviant">
          <li class="li">
            <router-link class="router" to="/account/hcp/hcpz/doctor">
              <div>医生</div>
            </router-link>
          </li>
          <li class="li">
            <router-link class="router" to="/account/hcp/hcpz/nurse">
              <div> 护士</div>
            </router-link>
          </li>
        </ul>
      </li>
      <!--科室-->
<!--      <li class="li" :class="{'icon-house':house, 'icon-house-act':!house}">
        <div @click="navigationB" :class="{edgeB}">
          <span>科室</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isD, 'el-icon-arrow-down': !isD}"></i>
        </div>
        <ul v-show="navigation2" class="deviant">
          <li class="li">
            <router-link class="router" to="">
              <div>内科</div>
            </router-link>
          </li>
          <li class="li">
            <router-link class="router" to="">
              <div> 内分泌科</div>
            </router-link>
          </li>
        </ul>
      </li>-->
      <!--职称-->
<!--      <li class="li" :class="{'icon-hammer':hammer, 'icon-hammer-act':!hammer}">
        <div @click="navigationC" :class="{edgeC}">
          <span>职称</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isE, 'el-icon-arrow-down': !isE}"></i>
        </div>
        <ul v-show="navigation3" class="deviant">
          <li class="li">
            <router-link class="router" to="">
              <div>主治医生</div>
            </router-link>
          </li>
          <li class="li">
            <router-link class="router" to="">
              <div> 主任医师</div>
            </router-link>
          </li>
        </ul>
      </li>-->
      <!--通用图谱-->
      <li class="li" :class="{'icon-table':table, 'icon-table-act':!table}">
        <div @click="navigationD" :class="{edgeD}">
          <span>通用图谱</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isF, 'el-icon-arrow-down': !isF}"></i>
        </div>
        <div v-show="navigation4">
          <sel-wrap icon="no-icon" title="影响力">
          <el-checkbox-group v-model="value1" size="medium" class=" mb1">
            <el-checkbox-button v-for="item in item1s" :label="item" :key="item">{{item}}</el-checkbox-button>
          </el-checkbox-group>
          </sel-wrap>
          <sel-wrap icon="no-icon" title="学术水平">
          <el-checkbox-group v-model="value2" size="medium" class="mb1">
            <el-checkbox-button v-for="item in item1s" :label="item" :key="item">{{item}}</el-checkbox-button>
          </el-checkbox-group>
          </sel-wrap>
          <sel-wrap icon="no-icon" title="学术关键字">
            <el-select v-model=value10 placeholder="请选择学术关键字">
              <el-option
                :key="item.value"
                v-for="(item, index) in keywords"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </sel-wrap>
          <sel-wrap icon="no-icon" title="药企合作意愿">
          <el-checkbox-group v-model="value3" size="medium" class="mb1">
            <el-checkbox-button v-for="item in item1s" :label="item" :key="item">{{item}}</el-checkbox-button>
          </el-checkbox-group>
          </sel-wrap>
          <sel-wrap icon="no-icon" title="医生潜力">
          <el-checkbox-group v-model="value4" size="medium" class="mb1">
            <el-checkbox-button v-for="item in item1s" :label="item" :key="item">{{item}}</el-checkbox-button>
          </el-checkbox-group>
          </sel-wrap>
          <sel-wrap icon="no-icon" title="关注内容标签">
            <el-select v-model=value11 placeholder="请选择学术关键字">
              <el-option
                :key="item.value"
                v-for="(item, index) in items11"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </sel-wrap>
        </div>
      </li>
      <!--疾病图谱-->
      <li class="li" :class="{'icon-noun':noun, 'icon-noun-act':!noun}">
        <div @click="navigationE" :class="{edgeE}">
          <span>疾病图谱</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isG, 'el-icon-arrow-down': !isG}"></i>
        </div>
        <div v-show="navigation5">
          <sel-wrap icon="no-icon" title="关注内容标签">
            <el-select v-model=value21 placeholder="请选择关注内容标签">
              <el-option
                :key="item.value"
                v-for="(item, index) in items21"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </sel-wrap>
          <sel-wrap icon="no-icon" title="治疗偏好">
            <el-select v-model=value22 placeholder="请选择治疗偏好">
              <el-option
                :key="item.value"
                v-for="(item, index) in items22"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </sel-wrap>
        </div>
        <!--<ul v-show="navigation5" class="deviant">
          <li class="li">
            <router-link class="router" to="">
              <div>主治医生</div>
            </router-link>
          </li>
          <li class="li">
            <router-link class="router" to="">
              <div> 主任医师</div>
            </router-link>
          </li>
        </ul>-->
      </li>
    </ul>
  </div>
</template>

<script>
  import selWrap from '@/comcom/selwrap'
  const components = {selWrap}
    export default {
      data() {
        return {
          value11: null,
          value2: [],
          value3: [],
          value4: [],
          items11: [
            {label: '肿瘤突变负荷', value: 1},
            {label: 'MMR', value: 2},
            {label: 'MSI', value: 3},
            {label: '肿瘤突变负荷', value: 4},
            {label: 'PD-1/PD-L1', value: 5},
            {label: 'CTLA-4', value: 6},
            {label: '治疗性抗体', value: 7},
            {label: '癌症疫苗', value: 8},
            {label: '细胞治疗', value: 9},
            {label: 'CAR-T', value: 10},
            {label: 'TCR-T', value: 11},
            {label: 'IDO', value: 12},
            {label: '非小细胞肺癌', value: 13},
            {label: 'NSCLC', value: 14},
            {label: 'SCLC', value: 15},
            {label: '黑色素瘤', value: 16},
            {label: 'T细胞淋巴瘤', value: 17},
            {label: '免疫逃逸', value: 18},
            {label: '靶向治疗', value: 19},
          ],
          items21: [
            {label: '肿瘤突变负荷', value: 1},
            {label: 'MMR', value: 2},
            {label: 'MSI', value: 3},
            {label: 'PD-1/PD-L1', value: 4},
            {label: 'CTLA-4', value: 5},
            {label: '治疗性抗体', value: 6},
            {label: '癌症疫苗', value: 7},
            {label: '细胞治疗', value: 8},
            {label: 'CAR-T', value: 9},
            {label: 'TCR-T', value: 10},
            {label: 'IDO', value: 11},
            {label: '非小细胞肺癌', value: 12},
            {label: 'NSCLC', value: 13},
            {label: '小细胞肺癌', value: 14},
            {label: 'SCLC', value: 15},
            {label: '肿瘤突变负荷', value: 16},
            {label: '结直肠癌', value: 17},
            {label: '复发结直肠癌', value: 18},
            {label: '膀胱癌', value: 19},
            {label: '头颈癌', value: 20},
            {label: '霍奇金淋巴瘤', value: 21},
            {label: '肾癌', value: 22},
            {label: '默克细胞癌', value: 23},
            {label: '黑色素瘤', value: 24},
            {label: 'T细胞淋巴瘤', value: 25},
            {label: '免疫逃逸', value: 26},
            {label: '靶向治疗', value: 27},
            {label: '联合治疗', value: 28},
          ],
          value21: null,
          value22: null,
          items22: [
            {label: '偏好免疫治疗', value: 1},
            {label: '偏好靶向治疗', value: 2},
            {label: '偏好联合化疗', value: 3},
            {label: '偏好细胞治疗', value: 4},
            {label: '偏好手术治疗', value: 5},
            {label: '偏好辅助治疗', value: 6},
          ],
          value10: null,
          keywords: [
            {label: '非小细胞肺癌', value: 1},
            {label: '黑色素瘤', value: 2},
            {label: '小细胞肺癌', value: 3},
            {label: '肿瘤突变负荷', value: 4},
            {label: 'MMR', value: 5},
            {label: 'MSI', value: 6},
            {label: 'PD-1/PD-L1', value: 7},
          ],
          value1: [],
          item1s: [
            '高',
            '中',
            '低',
          ],
          value7: null,


          user: true,
          house: true,
          hammer: true,
          table: true,
          noun: true,

          edgeA: false,
          edgeB: false,
          edgeC: false,
          edgeD: false,
          edgeE: false,

          navigation1: false,
          navigation2: false,
          navigation3: false,
          navigation4: false,
          navigation5: false,

          isC: false,
          isD: false,
          isE: false,
          isF: false,
          isG: false,

          dynamicTags: [
            {name: '标签一', type: ''},
            {name: '标签二', type: 'success'},
            {name: '标签三', type: 'info'},
            {name: '标签四', type: 'warning'},
            {name: '标签五', type: 'danger'}
          ],
        }
      },
      methods: {
        showToggle() {
          this.isShow = !this.isShow;
          this.isA = !this.isA;
        },
        showToggle1() {
          this.isShow1 = !this.isShow1;
          this.isB = !this.isB;
        },

        navigationA() {
          this.navigation1 = !this.navigation1;
          this.isC = !this.isC;
          this.edgeA = !this.edgeA;
          this.user = !this.user;
        },
        navigationB() {
          this.navigation2 = !this.navigation2;
          this.isD = !this.isD;
          this.edgeB = !this.edgeB;
          this.house = !this.house;
        },
        navigationC() {
          this.navigation3 = !this.navigation3;
          this.isE = !this.isE;
          this.edgeC = !this.edgeC;
          this.hammer = !this.hammer;
        },
        navigationD() {
          this.navigation4 = !this.navigation4;
          this.isF = !this.isF;
          this.edgeD = !this.edgeD;
          this.table = !this.table;
        },
        navigationE() {
          this.navigation5 = !this.navigation5;
          this.isG = !this.isG;
          this.edgeE = !this.edgeE;
          this.noun = !this.noun;
        },
      },
      components: components
    }
</script>

<style scoped>
  @import '../../../../assets/index.css';
  .li {
    list-style: none;
    margin: 0;
    padding-left: 30px;
    padding-bottom: 10px;
  }
  .ul > .li > div {
    font-size: 17px;
    color: #fff;
    padding: 0 30px 10px 0;
  }
  /*点击样式*/
  .edgeA {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeB {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeC {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeD {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeE {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .float {
    float: right;
  }
  .deviant {
    margin: 0 0 0 -30px
  }
  .router {
    text-decoration: none;
  }
  .router > div {
    font-size: 17px;
    color: #fff;
    padding: 5px 0;
  }

</style>
